
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟</title>
		<style>
			 .big{
				 width: 350px;
				 height: 350px;
			 }
			 .samll{
				 width: 300px;
				 height: 300px;
			 }
		</style>
		<script>
			  var id;
			  
			  function heart(){
				  if(id){
					  //在跳就停止
					  clearInterval(id);
					  id = undefined;
				  }else{
					  //没有跳就启动它
					  var index = 0;
					  id = setInterval(function(){
						  index++;
						  //奇数变大
						  var img = document.getElementById("img1");
						  if(index%2 == 0){
							  img.className = "small";
						  }else{
							  img.className = "big";
						  }
						  
					  },500);
				  }
			  }
			  
		</script>
	</head>
	<body>
		<!-- 300 300    350 350 500ms切换一次 -->
		  <p>
			  <img src="img/R-C.jpg" id="img1" onclick="heart()"/>
		  </p>
	</body>
</html>